<template>
  <div id="container"></div>
</template>

<script setup>
import {ref, onMounted, toRaw} from 'vue';
import * as THREE from 'three';


let cube;
const container = ref(null);
const scene = ref(null);
const camera = ref(null);
const renderer = ref(null);

onMounted(() => {
  init()
  animate()
})

function init() {
  container.value = document.getElementById('container')
  initScene()
  initCamera()
  initRenderer()
  initBox()
}

// 创建场景
function initScene () {
  scene.value = new THREE.Scene();
  scene.value.background = new THREE.Color('#999')
}
// 创建相机
function initCamera() {
  camera.value = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000);
  camera.value.position.z = 5;
  camera.value.position.y = 5;
  camera.value.lookAt(0, 0, 0);
}
// 创建渲染器
function initRenderer() {
  renderer.value = new THREE.WebGLRenderer();
  renderer.value.setSize(window.innerWidth, window.innerHeight);
  container.value.appendChild(renderer.value.domElement);

  // renderer.value.render(scene.value, camera.value)
}

// 创建盒子
function initBox() {
  cube = new THREE.Mesh(
      new THREE.BoxGeometry(1, 1, 1),
      new THREE.MeshBasicMaterial()
  )
  scene.value.add(cube)
}


// 动画
function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  renderer.value.render(toRaw(scene.value), camera.value);
}

</script>

<style>
#container {
  position: absolute;
  width: 100%;
  height: 100%;
}
</style>
